<template>
  <div class="gutter-example">
      <a-row :gutter="15" type="flex" justify="space-between">
        <a-col class="gutter-row" :span="19">
          <div class="gutter-box">
            <a-card :body-style="{padding:'15px'}">
              <div style="display: flex;justify-content: space-between">
                <div>已完成 <span>{{ topHeadData.upgradeTotal }}</span> 次升级</div>
                <div>共推送 <span>{{ topHeadData.pushTaskTotal }}</span> 个正式任务</div>
                <div>最新整车版本号：<span>{{ topHeadData.vehicleVersion }}</span></div>
                <div>最新DiLink版本号：<span>{{ topHeadData.diLinkVersion }}</span></div>
              </div>
            </a-card>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="5" style="padding-left: 0">
          <div class="gutter-box" style="height: 100%;">
            <a-card :body-style="{padding:'10px'}" style="height: 100%;">
              <task-select
                :defaultChooseLatestIdFlag="true"
                @changeoption="changeTaskId"
                :default-task-id="task"
                :query="{type:[1,2],status:[11,12,13,17]}"
                style="width: 100%;margin: 0 15px 0 0"
                placeholder="最新正式任务"
              ></task-select>
                <!--<a-dropdown>-->
                  <!--<a class="ant-dropdown-link" @click="e => e.preventDefault()" style="display: flex;justify-content: space-between;align-items: center">-->
                    <!--<div>{{ newTask.name }}</div><a-icon type="down" style=""/>-->
                  <!--</a>-->
                  <!--<a-menu slot="overlay">-->
                    <!--<a-menu-item>-->
                      <!--<a href="javascript:;">1st menu item</a>-->
                    <!--</a-menu-item>-->
                    <!--<a-menu-item>-->
                      <!--<a href="javascript:;">2nd menu item</a>-->
                    <!--</a-menu-item>-->
                    <!--<a-menu-item>-->
                      <!--<a href="javascript:;">3rd menu item</a>-->
                    <!--</a-menu-item>-->
                  <!--</a-menu>-->
                <!--</a-dropdown>-->
                <!--<div>最新正式任务</div>-->
                <!--<a-select  placeholder="please select your zone">-->
                  <!--<a-select-option value="shanghai"> Seletion one </a-select-option>-->
                  <!--<a-select-option value="beijing"> Seletion two </a-select-option>-->
                <!--</a-select>-->
            </a-card>
          </div>
        </a-col>
      </a-row>
    <a-row :gutter="15" type="flex" justify="space-between">
      <a-col class="gutter-row" :span="19">
        <div class="gutter-box flex-box">
          <div class="flex-box-item">
            <div style="display: flex;justify-content: space-between;align-items: center;">
              <div><span><strong> {{ $t('latestAnomaliesTask') }}</strong>
            </span>
                <span><a-popover style="cursor: pointer" trigger="hover" title="">
                  <template slot="content">
                    <p>当前任务累计检测异常数与本日新增检测异常数。</p>
                  </template>
                  <span class="question">&#xe8e9;</span>
                </a-popover></span>
                <div>
                  <span style="cursor: pointer" @click="gotoMonitorList('latestAnomaliesTask','N',task)">
                    <a-popover v-if="dashboardHead.taskTotal.checkFailCount > 1000000" style="cursor: pointer" trigger="hover" title="">
                      <template slot="content">
                        <p>{{dashboardHead.taskTotal.checkFailCount }}</p>
                      </template>
                      <strong style="font-size: xx-large">{{ numericOverflow(dashboardHead.taskTotal.checkFailCount,1000000) }}</strong>
                    </a-popover>
                    <strong v-else style="font-size: xx-large">{{ numericOverflow(dashboardHead.taskTotal.checkFailCount,1000000) }}</strong>
                    <a-popover v-if="dashboardHead.taskToday.checkFailCount + dashboardHead.taskEcuToday.checkFailCount > 10000" style="cursor: pointer" trigger="hover" title="">
                      <template slot="content">
                        <p>{{dashboardHead.taskToday.checkFailCount + dashboardHead.taskEcuToday.checkFailCount }}</p>
                      </template>
                      <sup
                        style="color: red;font-size: medium;">+{{ numericOverflow(dashboardHead.taskToday.checkFailCount + dashboardHead.taskEcuToday.checkFailCount,10000) }}</sup>
                    </a-popover>
                    <sup
                      v-else
                      style="color: red;font-size: medium;">+{{ numericOverflow(dashboardHead.taskToday.checkFailCount + dashboardHead.taskEcuToday.checkFailCount,10000) }}</sup>
                  </span>
                </div>
              </div>
              <div class="gutterImgBox">
                <img :src="gutterImg.latestAnomaliesTask" class="gutterImg" alt="">
            </div>
            </div>
            <div>
              <a-popover v-if="dashboardHead.taskToday.checkFailCount > 10000" style="cursor: pointer" trigger="hover" title="">
              <template slot="content">
                <p>{{ dashboardHead.taskToday.checkFailCount }}</p>
              </template>
                <span style="float: left;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestAnomaliesTask','task',task)">{{ $t('TaskException') }}<span
                  style="color: red">+{{ dashboardHead.taskToday.checkFailCount }}</span></span>
            </a-popover>
              <span v-else style="float: left;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestAnomaliesTask','task',task)">{{ $t('TaskException') }}<span
              style="color: red">+{{ dashboardHead.taskToday.checkFailCount }}</span></span>
              <a-popover v-if="dashboardHead.taskEcuToday.checkFailCount > 10000" style="cursor: pointer" trigger="hover" title="">
                <template slot="content">
                  <p>{{ dashboardHead.taskEcuToday.checkFailCount }}</p>
                </template>
                <span style="float: right;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestAnomaliesTask','ecu',task)">{{ $t('EcuException') }} <span
                  style="color: red">+{{ dashboardHead.taskEcuToday.checkFailCount }}</span></span>
              </a-popover>
              <span v-else style="float: right;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestAnomaliesTask','ecu',task)">{{ $t('EcuException') }} <span
              style="color: red">+{{ dashboardHead.taskEcuToday.checkFailCount }}</span></span>
            </div>
          </div>
          <div class="flex-box-item">
            <div style="display: flex;justify-content: space-between;align-items: center">
              <div>
                <span><strong> {{ $t('latestDownloadAnomaliesTask') }}</strong></span>
                <span><a-popover style="cursor: pointer" trigger="hover" title="">
                  <template slot="content">
                    <p>当前任务累计下载异常数与本日新增下载异常数。</p>
                  </template>
                  <span class="question">&#xe8e9;</span>
                </a-popover></span>
                <div>
                  <span style="cursor: pointer" @click="gotoMonitorList('latestDownloadAnomaliesTask','N',task)">
                    <a-popover v-if="dashboardHead.taskTotal.downLoadFailCount > 1000000" style="cursor: pointer" trigger="hover" title="">
                      <template slot="content">
                        <p>{{dashboardHead.taskTotal.downLoadFailCount }}</p>
                      </template>
                      <strong style="font-size: xx-large">{{ numericOverflow(dashboardHead.taskTotal.downLoadFailCount,1000000) }}</strong>
                    </a-popover>
                    <strong v-else style="font-size: xx-large">{{ numericOverflow(dashboardHead.taskTotal.downLoadFailCount,1000000) }}</strong>
                    <a-popover v-if="dashboardHead.taskToday.downLoadFailCount + dashboardHead.taskEcuToday.downLoadFailCount > 10000" style="cursor: pointer" trigger="hover" title="">
                      <template slot="content">
                        <p>{{dashboardHead.taskToday.downLoadFailCount + dashboardHead.taskEcuToday.downLoadFailCount }}</p>
                      </template>
                      <sup
                        style="color: red;font-size: medium;">+{{ numericOverflow(dashboardHead.taskToday.downLoadFailCount + dashboardHead.taskEcuToday.downLoadFailCount,10000) }}</sup>
                    </a-popover>
                    <sup
                      v-else
                      style="color: red;font-size: medium;">+{{ numericOverflow(dashboardHead.taskToday.downLoadFailCount + dashboardHead.taskEcuToday.downLoadFailCount,10000) }}</sup>
                  </span>
                </div>
              </div>
              <div class="gutterImgBox">
                <img :src="gutterImg.latestDownloadAnomaliesTask" class="gutterImg" alt="">
              </div>
            </div>
            <div>
              <a-popover v-if="dashboardHead.taskToday.downLoadFailCount > 10000" style="cursor: pointer" trigger="hover" title="">
                <template slot="content">
                  <p>{{ dashboardHead.taskToday.downLoadFailCount }}</p>
                </template>
                <span style="float: left;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestDownloadAnomaliesTask','task',task)">{{ $t('TaskException') }}<span
                  style="color: red" >+{{ dashboardHead.taskToday.downLoadFailCount }}</span></span>
              </a-popover>
              <span v-else style="float: left;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestDownloadAnomaliesTask','task',task)">{{ $t('TaskException') }}<span
              style="color: red" >+{{ dashboardHead.taskToday.downLoadFailCount }}</span></span>
              <a-popover v-if="dashboardHead.taskEcuToday.downLoadFailCount > 10000" style="cursor: pointer" trigger="hover" title="">
                <template slot="content">
                  <p>{{ dashboardHead.taskEcuToday.downLoadFailCount }}</p>
                </template>
                <span style="float: right;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestDownloadAnomaliesTask','ecu',task)">{{ $t('EcuException') }} <span style="color: red">+{{
              dashboardHead.taskEcuToday.downLoadFailCount
              }}</span></span>
              </a-popover>
              <span v-else style="float: right;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestDownloadAnomaliesTask','ecu',task)">{{ $t('EcuException') }} <span style="color: red">+{{
              dashboardHead.taskEcuToday.downLoadFailCount
              }}</span></span>
            </div>
          </div>
          <div class="flex-box-item">
            <div style="display: flex;justify-content: space-between;align-items: center">
              <div><span><strong> {{ $t('latestInstallAnomaliesTask') }}</strong>
            </span>
                <span><a-popover style="cursor: pointer" trigger="hover" title="">
                  <template slot="content">
                    <p>当前任务累计安装异常数与本日新增安装异常数。</p>
                  </template>
                  <span class="question">&#xe8e9;</span>
                </a-popover></span>
                <div>
                  <span style="cursor: pointer" @click="gotoMonitorList('latestInstallAnomaliesTask','N',task)">
                    <a-popover v-if="dashboardHead.taskTotal.upgradeFailCount > 1000000" style="cursor: pointer" trigger="hover" title="">
                      <template slot="content">
                        <p>{{dashboardHead.taskTotal.upgradeFailCount }}</p>
                      </template>
                      <strong style="font-size: xx-large">{{ numericOverflow(dashboardHead.taskTotal.upgradeFailCount,1000000) }}</strong>
                    </a-popover>
                    <strong v-else style="font-size: xx-large">{{ numericOverflow(dashboardHead.taskTotal.upgradeFailCount,1000000) }}</strong>
                    <a-popover v-if="dashboardHead.taskToday.upgradeFailCount + dashboardHead.taskEcuToday.upgradeFailCount > 10000" style="cursor: pointer" trigger="hover" title="">
                      <template slot="content">
                        <p>{{dashboardHead.taskToday.upgradeFailCount + dashboardHead.taskEcuToday.upgradeFailCount }}</p>
                      </template>
                      <sup
                        style="color: red;font-size: medium;">+{{ numericOverflow(dashboardHead.taskToday.upgradeFailCount + dashboardHead.taskEcuToday.upgradeFailCount,10000) }}</sup>
                    </a-popover>
                    <sup
                      v-else
                      style="color: red;font-size: medium;">+{{ numericOverflow(dashboardHead.taskToday.upgradeFailCount + dashboardHead.taskEcuToday.upgradeFailCount,10000) }}</sup>
                  </span>
                </div>
              </div>
              <div class="gutterImgBox">
                <img :src="gutterImg.latestInstallAnomaliesTask" class="gutterImg" alt="">
              </div>
            </div>
            <div>
              <a-popover v-if="dashboardHead.taskToday.upgradeFailCount > 10000" style="cursor: pointer" trigger="hover" title="">
                <template slot="content">
                  <p>{{ dashboardHead.taskToday.upgradeFailCount }}</p>
                </template>
                <span style="float: left;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestInstallAnomaliesTask','task',task)">{{ $t('TaskException') }}<span
                  style="color: red">+{{ dashboardHead.taskToday.upgradeFailCount }}</span></span>
              </a-popover>
              <span v-else style="float: left;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestInstallAnomaliesTask','task',task)">{{ $t('TaskException') }}<span
                style="color: red">+{{ dashboardHead.taskToday.upgradeFailCount }}</span></span>
              <a-popover v-if="dashboardHead.taskEcuToday.upgradeFailCount > 10000" style="cursor: pointer" trigger="hover" title="">
                <template slot="content">
                  <p>{{ dashboardHead.taskEcuToday.upgradeFailCount }}</p>
                </template>
                <span style="float: right;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestInstallAnomaliesTask','ecu',task)">{{ $t('EcuException') }}<span style="color: red">+{{
            dashboardHead.taskEcuToday.upgradeFailCount
            }}</span></span>
              </a-popover>
              <span v-else style="float: right;color: #ababab;cursor: pointer" @click="gotoMonitorList('latestInstallAnomaliesTask','ecu',task)">{{ $t('EcuException') }}<span style="color: red">+{{
            dashboardHead.taskEcuToday.upgradeFailCount
            }}</span></span>
            </div>
          </div>
          <div class="flex-box-item">
            <div style="display: flex;justify-content: space-between;align-items: center">
              <div><span><strong> {{ $t('latestAddVehiclesTask') }}</strong>
            </span>
                <span><a-popover style="cursor: pointer" trigger="hover" title="">
                  <template slot="content">
                    <p>当前任务中已完成升级的车辆数。</p>
                  </template>
                  <span class="question">&#xe8e9;</span>
                </a-popover></span>
                <div>
                  <a-popover v-if="dashboardHead.currentTaskVehicleUpdatedCount > 1000000" style="cursor: pointer" trigger="hover" title="">
                    <template slot="content">
                      <p>{{dashboardHead.currentTaskVehicleUpdatedCount }}</p>
                    </template>
                    <p>
                      <strong style="font-size: xx-large">{{ numericOverflow(dashboardHead.currentTaskVehicleUpdatedCount,1000000) }}</strong>
                      <sub
                        style="font-size: medium;"> {{ $t('carTai') }}</sub>
                    </p>
                  </a-popover>
                  <strong v-else style="font-size: xx-large">{{ dashboardHead.currentTaskVehicleUpdatedCount }}</strong>
                </div>
              </div>
              <div class="gutterImgBox">
                <img :src="gutterImg.latestAddVehiclesTask" class="gutterImg" alt="">
              </div>
            </div>
            <div>
              <!--<span style="float: left;color: #ababab">{{ $t('increase') }}<span-->
                <!--style="color: black">-->
            <!--{{-->
            <!--dashboardHead.taskToday.upgradeSuccessCount===0&&dashboardHead.taskTotal.upgradeSuccessCount===0?0:(dashboardHead.taskToday.upgradeSuccessCount / dashboardHead.taskTotal.upgradeSuccessCount).toFixed(4)-->
            <!--}}%-->
            <!--</span></span>-->
              <span
            style="float: left;color: #ababab">{{ $t('completionRate') }}<span
            style="color: black">{{ dashboardHead.currentTaskVehicleUpdatedCount===0||dashboardHead.currentTaskVehicleCount===0?0:((dashboardHead.currentTaskVehicleUpdatedCount / dashboardHead.currentTaskVehicleCount)*100).toFixed(2)}}%</span></span>
            </div>
          </div>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="5" style="padding-left: 0">
        <div class="gutter-box" style="height: 100%;">
          <a-card :body-style="{padding:'15px'}" style="height: 100%;">
            <div style="display: flex;justify-content: space-between;align-items: center">
              <div><span><strong> {{ $t('upgradeMissionVehicle') }}</strong>
            </span>
                <span><a-popover style="cursor: pointer" trigger="hover" title="">
                  <template slot="content">
                    <p>当前任务的推送车辆总数，包含追加车辆数。</p>
                  </template>
                  <span class="question">&#xe8e9;</span>
                </a-popover></span>
                <div>
                  <a-popover v-if="dashboardHead.currentTaskVehicleCount > 1000000" style="cursor: pointer" trigger="hover" title="">
                    <template slot="content">
                      <p>{{dashboardHead.currentTaskVehicleCount }}</p>
                    </template>
                    <p>
                      <strong style="font-size: xx-large">{{ numericOverflow(dashboardHead.currentTaskVehicleCount,1000000) }}</strong>
                      <sub
                        style="font-size: medium;"> {{ $t('carTai') }}</sub>
                    </p>
                  </a-popover>
                  <strong v-else style="font-size: xx-large">{{ dashboardHead.currentTaskVehicleCount }}</strong>
                </div>
              </div>
              <div class="gutterImgBox">
                <img :src="gutterImg.upgradeMissionVehicle" class="gutterImg" alt="">
              </div>
            </div>
            <div>
              <a-popover v-if="dashboardHead.currentTaskVehicleAddedCount > 1000000" style="cursor: pointer" trigger="hover" title="">
                <template slot="content">
                  <p>{{ dashboardHead.currentTaskVehicleAddedCount }}</p>
                </template>
                <p>{{ $t('completedVehicle') }} {{ numericOverflow(dashboardHead.currentTaskVehicleAddedCount, 1000000) }} {{ $t('carTai') }}</p>
              </a-popover>
              <span v-else style="float: left;color: #ababab">
                {{ $t('completedVehicle') }}<span style="color: black">{{ dashboardHead.currentTaskVehicleAddedCount }} {{ $t('carTai') }}</span>
              </span>
            </div>
          </a-card>
        </div>
      </a-col>
    </a-row>

    <!--<a-row :gutter="15">-->
      <!--<a-col class="gutter-row" :span="5">-->
        <!--<div class="gutter-box">-->
          <!--<a-card :body-style="{padding:'15px'}">-->
            <!--<div><span><strong> {{ $t('latestAnomaliesTask') }}</strong></span></div>-->
            <!--<div><p><strong style="font-size: xx-large">{{ resData.checkFailCount }}</strong><sup-->
              <!--style="color: red;font-size: medium;">+{{ resTodayData.checkFailCount }}</sup></p></div>-->
            <!--<div><span style="float: left;color: #ababab">{{ $t('TaskException') }}<span-->
              <!--style="color: red">+{{ resTodayData.checkFailCount }}</span></span><span-->
              <!--style="float: right;color: #ababab">{{ $t('EcuException') }} <span-->
              <!--style="color: red">+{{ resEcuTodayData.checkFailCount }}</span></span></div>-->
          <!--</a-card>-->
        <!--</div>-->
      <!--</a-col>-->
      <!--<a-col class="gutter-row" :span="5">-->
        <!--<div class="gutter-box">-->
          <!--<a-card :body-style="{padding:'15px'}">-->
            <!--<div><span><strong>{{ $t('latestDownloadAnomaliesTask') }}</strong></span></div>-->
            <!--<div><p><strong style="font-size: xx-large" @click="downLoadFail">{{ resData.downLoadFailCount }}</strong><sup-->
              <!--style="color: red;font-size: medium;">+{{ resTodayData.downLoadFailCount }}</sup></p></div>-->
            <!--<div><span style="float: left;color: #ababab" >{{ $t('TaskException') }}<span-->
              <!--style="color: red"  @click="downLoadFail">+{{ resTodayData.downLoadFailCount }}</span></span><span-->
              <!--style="float: right;color: #ababab">{{ $t('EcuException') }} <span style="color: red">+{{-->
                <!--resEcuTodayData.downLoadFailCount-->
              <!--}}</span></span></div>-->
          <!--</a-card>-->
        <!--</div>-->
      <!--</a-col>-->
      <!--<a-col class="gutter-row" :span="5">-->
        <!--<div class="gutter-box">-->
          <!--<a-card :body-style="{padding:'15px'}">-->
            <!--<div><span><strong>{{ $t('latestInstallAnomaliesTask') }}</strong></span></div>-->
            <!--<div><p><strong style="font-size: xx-large">{{ resData.upgradeFailCount }}</strong><sup-->
              <!--style="color: red;font-size: medium;">+{{ resTodayData.upgradeFailCount }}</sup></p></div>-->
            <!--<div><span style="float: left;color: #ababab">{{ $t('TaskException') }}<span-->
              <!--style="color: red">+{{ resTodayData.upgradeFailCount }}</span></span><span-->
              <!--style="float: right;color: #ababab">{{ $t('EcuException') }}<span style="color: red">+{{-->
                <!--resEcuTodayData.upgradeFailCount-->
              <!--}}</span></span></div>-->
          <!--</a-card>-->
        <!--</div>-->
      <!--</a-col>-->
      <!--<a-col class="gutter-row" :span="5">-->
        <!--<div class="gutter-box">-->
          <!--<a-card :body-style="{padding:'15px'}">-->
            <!--<div><span><strong>{{ $t('latestAddVehiclesTask') }}</strong></span></div>-->
            <!--<div><p><strong style="font-size: xx-large">{{ resAllTodayData.upgradeSuccessCount }}</strong></p></div>-->
            <!--<div><span style="float: left;color: #ababab">{{ $t('increase') }}<span-->
              <!--style="color: black">-->
              <!--{{-->
                <!--((resAllTodayData.upgradeSuccessCount - resAllYesterdayData.upgradeSuccessCount) / (resAllYesterdayData.upgradeSuccessCount == 0 ? 1 : resAllYesterdayData.upgradeSuccessCount).toFixed(4))-->
              <!--}}%-->
            <!--</span></span><span-->
              <!--style="float: right;color: #ababab">{{ $t('completionRate') }}<span-->
              <!--style="color: black">{{ (resAllTodayData.upgradeSuccessCount / (resAllTodayData.taskVehicleCount == 0 ? 1 : resAllTodayData.taskVehicleCount)).toFixed(0) }}%</span></span>-->
            <!--</div>-->
          <!--</a-card>-->
        <!--</div>-->
      <!--</a-col>-->
      <!--<a-col class="gutter-row" :span="5">-->
        <!--<div class="gutter-box">-->
          <!--<a-card :body-style="{padding:'15px'}">-->
            <!--<div><span><strong>{{ $t('upgradeMissionVehicle') }}</strong></span></div>-->
            <!--<div><p><strong style="font-size: xx-large">{{ resData.taskVehicleCount }}</strong>-->
              <!--<sub-->
                <!--style="font-size: medium;">{{ $t('carTai') }}</sub></p>-->
            <!--</div>-->
            <!--<div><span style="float: left;color: #ababab">{{ $t('completedVehicle') }}<span style="color: black">{{ resData.upgradeSuccessCount }} {{ $t('carTai') }}</span></span>-->
            <!--</div>-->
          <!--</a-card>-->
        <!--</div>-->
      <!--</a-col>-->
    <!--</a-row>-->
  </div>
</template>
<script>

import statisticsApi from '@/api/modules/statistics'
import taskApi from '@/api/modules/task'
import TaskSelect from '@/views/components/TaskSelect'
import { mapGetters } from 'vuex'

export default {
  name: 'DashboardHead',
  components: {TaskSelect},
  props: {
    task: {
      type: [String, Object, Array],
      default () {
        return undefined
      }
    }
  },
  data() {
    return {
      resData: {
        checkSuccessCount: 0,
        downloadSuccessCount: 0,
        upgradeSuccessCount: 0,
        totalCheckFail: 0,
        checkFailCount: 0,
        downLoadFailCount: 0,
        upgradeFailCount: 0,
        taskVehicleCount: 0,
      },
      resTodayData: {
        checkSuccessCount: 0,
        downloadSuccessCount: 0,
        upgradeSuccessCount: 0,
        totalCheckFail: 0,
        checkFailCount: 0,
        downLoadFailCount: 0,
        upgradeFailCount: 0,
        taskVehicleCount: 0,
      },
      resAllTodayData: {
        checkSuccessCount: 0,
        downloadSuccessCount: 0,
        upgradeSuccessCount: 0,
        totalCheckFail: 0,
        checkFailCount: 0,
        downLoadFailCount: 0,
        upgradeFailCount: 0,
        taskVehicleCount: 0,
      },
      resAllYesterdayData: {
        checkSuccessCount: 0,
        downloadSuccessCount: 0,
        upgradeSuccessCount: 0,
        totalCheckFail: 0,
        checkFailCount: 0,
        downLoadFailCount: 0,
        upgradeFailCount: 0,
        taskVehicleCount: 0,
      },
      resEcuTodayData: {
        totalCheckFail: 0,
        checkFailCount: 0,
        downLoadFailCount: 0,
        upgradeFailCount: 0,
      },
      newTask:{
        id:'',
        name:''
      },
      topHeadData: {
        diLinkVersion: '', //最新DiLink版本号
        pushTaskTotal: 0, //正式任务个数
        upgradeTotal: 0, //总升级次数
        vehicleVersion: '', //最新整车版本号
      },
      dashboardHead: {
        currentTaskVehicleAddedCount: 0,
        currentTaskVehicleCount: 0,
        currentTaskVehicleUpdatedCount: 0,
        taskEcuToday: {
          checkFailCount: 0,
          checkSuccessCount: 0,
          downLoadFailCount: 0,
          downloadSuccessCount: 0,
          upgradeFailCount: 0,
          upgradeSuccessCount: 0
        },
        taskId: '',
        taskName: '',
        taskToday: {
          checkFailCount: 0,
          checkSuccessCount: 0,
          downLoadFailCount: 0,
          downloadSuccessCount: 0,
          upgradeFailCount: 0,
          upgradeSuccessCount: 0
        },
        taskTotal: {
          checkFailCount: 0,
          checkSuccessCount: 0,
          downLoadFailCount: 0,
          downloadSuccessCount: 0,
          upgradeFailCount: 0,
          upgradeSuccessCount: 0
        }
      },
      gutterImg: {
        latestAddVehiclesTask: require('@/assets/icons/latestAddVehiclesTask.svg'),
        latestAnomaliesTask: require('@/assets/icons/latestAnomaliesTask.svg'),
        latestDownloadAnomaliesTask: require('@/assets/icons/latestDownloadAnomaliesTask.svg'),
        latestInstallAnomaliesTask: require('@/assets/icons/latestInstallAnomaliesTask.svg'),
        upgradeMissionVehicle: require('@/assets/icons/upgradeMissionVehicle.svg')
      }
    }
  },
  created () {
    // this.getTask();
  },
  computed:{
    ...mapGetters(['addRouters']),
  },
  methods: {
    numericOverflow (num, val = 1000000) {
      if (num > val) {
        return parseInt(num / val) + 'K'
      } else {
        return num
      }
    },
    gotoMonitorList (taskFailType, taskOrEcuType, taskId) {
      //返回一个Boolean  用于判断是否存在该路由权限
      let flag = this.addRouters.findIndex( e => {
        return e.path == "/statistics"  && e.children.findIndex( a => {
          return a.path == "/statistics/monitorList"
        }) != -1
      }) != -1
      if (flag) {
        this.$router.push({ path: '/statistics/monitorList', query: { taskFailType, taskOrEcuType, taskId } })
      } else{
        this.$message.error(this.$t('noSuchPermission'))
      }
    },
    changeTaskId(e){
      this.$emit('changeTask',e)
    },
    getData(newV,oldV){
      statisticsApi.getTopHeadData().then(({ data }) => {
        //循环赋值  等同于浅拷贝加默认值设置
        for(let key of Object.keys(this.topHeadData)){
          this.topHeadData[key] = data[key] ? data[key] : (typeof this.topHeadData[key]) === 'number' ? 0 : '-'
        }
      })
      statisticsApi.getDashboardHead(newV).then(({ data }) => {
        this.dashboardHead = {
          currentTaskVehicleAddedCount: data.currentTaskVehicleAddedCount || 0,
          currentTaskVehicleCount: data.currentTaskVehicleCount || 0,
          currentTaskVehicleUpdatedCount: data.currentTaskVehicleUpdatedCount || 0,
          taskEcuToday: {
            checkFailCount: data.taskEcuToday?.checkFailCount || 0,
            checkSuccessCount: data.taskEcuToday?.checkSuccessCount || 0,
            downLoadFailCount: data.taskEcuToday?.downLoadFailCount || 0,
            downloadSuccessCount: data.taskEcuToday?.downloadSuccessCount || 0,
            upgradeFailCount: data.taskEcuToday?.upgradeFailCount || 0,
            upgradeSuccessCount: data.taskEcuToday?.upgradeSuccessCount || 0,
          },
          taskId: data.taskId || '',
          taskName: data.taskName || '',
          taskToday: {
            checkFailCount: data.taskToday?.checkFailCount || 0,
            checkSuccessCount: data.taskToday?.checkSuccessCount || 0,
            downLoadFailCount: data.taskToday?.downLoadFailCount || 0,
            downloadSuccessCount: data.taskToday?.downloadSuccessCount || 0,
            upgradeFailCount: data.taskToday?.upgradeFailCount || 0,
            upgradeSuccessCount: data.taskToday?.upgradeSuccessCount || 0,
          },
          taskTotal: {
            checkFailCount: data.taskTotal?.checkFailCount || 0,
            checkSuccessCount: data.taskTotal?.checkSuccessCount || 0,
            downLoadFailCount: data.taskTotal?.downLoadFailCount || 0,
            downloadSuccessCount: data.taskTotal?.downloadSuccessCount || 0,
            upgradeFailCount: data.taskTotal?.upgradeFailCount || 0,
            upgradeSuccessCount: data.taskTotal?.upgradeSuccessCount || 0,
          }
        }
      })
    },
    downLoadFail(){
      this.$router.push({path:'/statistics/monitorList',query:{type:'下载失败'}})
    },
    getTask() {
      //获取最新任务ID
      taskApi.getTaskSelect({type: [1, 2]}).then((res) => {
        //最新任务数据
        this.loadData([res.data[0].id], res.data[0].startTime);
        //所有任务ID
        let allTasks = res.data.map((item) => {
          return item.id;
        })
        this.$emit('allTask', res.data.map((item) => {
          return { id: item.id, name: item.name };
        }))
        //获取所有任务今天数据
        this.loadData(allTasks, new Date(), "all");

        //获取所有任务昨天天数据
        this.loadData(allTasks, null, "all");
      });
    },
    //init data
    loadData(taskId, startTime, all) {
      let params = {
        taskType: 1,
        startTime: this.convertToDate(startTime,0),
        endTime: this.convertToDate(new Date(),0),
        taskIds: taskId
      }
      if (!all) {

        statisticsApi
          .getDataForDashBoard(params)
          .then((res) => {
            const data = res.data.taskStatisticsList.map((item) => {
              return {
                taskId: item.taskId,
                taskName: item.taskName,
                status: item.status,
                checkSuccessCount: item.checkSuccessCount || 0,
                downloadSuccessCount: item.downloadSuccessCount || 0,
                upgradeSuccessCount: item.upgradeSuccessCount || 0,
                totalCheckFail: item.totalCheckFail || 0,
                checkFailCount: item.checkFailCount || 0,
                downLoadFailCount: item.downLoadFailCount || 0,
                upgradeFailCount: item.upgradeFailCount || 0,
                taskVehicleCount: item.taskVehicleCount,
                startTime: item.startTime,
                endTime: item.endTime
              }
            })
            this.resData = data.length > 0 ? data[0] : {
              checkSuccessCount: 0,
              downloadSuccessCount: 0,
              upgradeSuccessCount: 0,
              totalCheckFail: 0,
              checkFailCount: 0,
              downLoadFailCount: 0,
              upgradeFailCount: 0,
              taskVehicleCount: 0,
            }
          })
          .finally(() => {
            //this.loadingTbData = false
          })

        //获取当天数据
        params = {
          taskType: 1,
          startTime: this.convertToDate(new Date(),0),
          endTime: this.convertToDate(new Date(),0),
          taskIds: taskId
        }
        statisticsApi
          .getDataForDashBoard(params)
          .then((res) => {
            const data = res.data.taskStatisticsList.map((item) => {
              return {
                taskId: item.taskId,
                taskName: item.taskName,
                status: item.status,
                checkSuccessCount: item.checkSuccessCount || 0,
                downloadSuccessCount: item.downloadSuccessCount || 0,
                upgradeSuccessCount: item.upgradeSuccessCount || 0,
                totalCheckFail: item.totalCheckFail || 0,
                checkFailCount: item.checkFailCount || 0,
                downLoadFailCount: item.downLoadFailCount || 0,
                upgradeFailCount: item.upgradeSuccessCount || 0,
                taskVehicleCount: item.taskVehicleCount,
                startTime: item.startTime,
                endTime: item.endTime
              }
            })
            this.resTodayData = data.length > 0 ? data[0] : {
              checkSuccessCount: 0,
              downloadSuccessCount: 0,
              upgradeSuccessCount: 0,
              totalCheckFail: 0,
              checkFailCount: 0,
              downLoadFailCount: 0,
              upgradeFailCount: 0,
              taskVehicleCount: 0,
            };
            //ecu今日数据
            const ecuData = res.data.taskEcuStatisticsList.map((item) => {
              return {
                totalCheckFail: item.totalCheckFail || 0,
                checkFailCount: item.checkFailCount || 0,
                downLoadFailCount: item.downLoadFailCount || 0,
                upgradeFailCount: item.upgradeFailCount || 0,
              }
            })
            this.resEcuTodayData = ecuData.length > 0 ? ecuData[0] : {
              totalCheckFail: 0,
              checkFailCount: 0,
              downLoadFailCount: 0,
              upgradeFailCount: 0,
            };

          })
          .finally(() => {
            //this.loadingTbData = false
          })
      }else {
        if (startTime){
          //获取当天所有任务数据
          params = {
            taskType: 1,
            startTime: this.convertToDate(new Date(),0),
            endTime: this.convertToDate(new Date(),0),
            taskIds: taskId
          }
          statisticsApi
            .getDataForDashBoard(params)
            .then((res) => {
              const data = res.data.taskStatisticsList.map((item) => {
                return {
                  taskId: item.taskId,
                  taskName: item.taskName,
                  status: item.status,
                  checkSuccessCount: item.checkSuccessCount || 0,
                  downloadSuccessCount: item.downloadSuccessCount || 0,
                  upgradeSuccessCount: item.upgradeSuccessCount || 0,
                  totalCheckFail: item.totalCheckFail || 0,
                  checkFailCount: item.checkFailCount || 0,
                  downLoadFailCount: item.downLoadFailCount || 0,
                  upgradeFailCount: item.upgradeFailCount || 0,
                  taskVehicleCount: item.taskVehicleCount,
                  startTime: item.startTime,
                  endTime: item.endTime
                }
              })
              this.resAllTodayData = data.length > 0 ? data[0] : {
                checkSuccessCount: 0,
                downloadSuccessCount: 0,
                upgradeSuccessCount: 0,
                totalCheckFail: 0,
                checkFailCount: 0,
                downLoadFailCount: 0,
                upgradeFailCount: 0,
                taskVehicleCount: 0,
              };

            })
            .finally(() => {
              //this.loadingTbData = false
            })
        }else {
          //获取昨天数据
          params = {
            taskType: 1,
            startTime: this.convertToDate(new Date(),-1),
            endTime: this.convertToDate(new Date(),-1),
            taskIds: taskId
          }
          statisticsApi
            .getDataForDashBoard(params)
            .then((res) => {
              const data = res.data.taskStatisticsList.map((item) => {
                return {
                  taskId: item.taskId,
                  taskName: item.taskName,
                  status: item.status,
                  checkSuccessCount: item.checkSuccessCount || 0,
                  downloadSuccessCount: item.downloadSuccessCount || 0,
                  upgradeSuccessCount: item.upgradeSuccessCount || 0,
                  totalCheckFail: item.totalCheckFail || 0,
                  checkFailCount: item.checkFailCount || 0,
                  downLoadFailCount: item.downLoadFailCount || 0,
                  upgradeFailCount: item.upgradeFailCount || 0,
                  taskVehicleCount: item.taskVehicleCount,
                  startTime: item.startTime,
                  endTime: item.endTime
                }
              })
              this.resAllYesterdayData = data.length > 0 ? data[0] : {
                checkSuccessCount: 0,
                downloadSuccessCount: 0,
                upgradeSuccessCount: 0,
                totalCheckFail: 0,
                checkFailCount: 0,
                downLoadFailCount: 0,
                upgradeFailCount: 0,
                taskVehicleCount: 0,
              };

            })
            .finally(() => {
              //this.loadingTbData = false
            })
        }

      }

    },
/*    convertToDate(day) {
      let date = new Date(day);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      m = m < 10 ? "0" + m : m; //月小于10，加0
      d = d < 10 ? "0" + d : d; //day小于10，加0
      return y + "-" + m + "-" + d;
    },*/
    convertToDate(date,day){
      let dd = new Date(date);
      dd.setDate(dd.getDate()+day);
      let y = dd.getFullYear();
      let m = dd.getMonth() + 1;
      let d = dd.getDate();
      m = m < 10 ? "0" + m : m; //月小于10，加0
      d = d < 10 ? "0" + d : d; //day小于10，加0
      return y + "-" + m + "-" + d;
    }
  },
  watch:{
    task(newV,oldV){
      this.getData(newV,oldV)
    }
  }
}
</script>
<style scoped lang="less">
.gutter-row {
  background-color: #ececec;
}

.gutter-box {
  background-color: #ececec;
  padding: 5px 0;
}

.ant-col-5 {
  width: 20%;
}
.gutter-box{
  font-size: 1.4rem;
}
  .flex-box{
    display: flex;
    justify-content: space-between;
    height: 100%;
    .flex-box-item{
      padding: 15px;
      background-color: white;
      flex: 1;
      margin-right: 15px;
      &:last-of-type{
      margin-right: 0
    }
    }
  }
  @font-face {
    font-family: 'question';  /* Project id 3954971 */
    src: url('//at.alicdn.com/t/c/font_3954971_i1qizfurwv.woff2?t=1678874256788') format('woff2'),
    url('//at.alicdn.com/t/c/font_3954971_i1qizfurwv.woff?t=1678874256788') format('woff'),
    url('//at.alicdn.com/t/c/font_3954971_i1qizfurwv.ttf?t=1678874256788') format('truetype');
  }
  .question{
    font-family: 'question' !important;
    font-size: 20px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #dbdbdb;
    margin-left: 5px;
  }
  .gutterImgBox{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: #3e4bff;
    .gutterImg{
      width: 35px;
      height: 35px;
    }
  }
</style>
